<script setup lang="ts">
import { userStore } from '@/stores/user'
import { reactive, ref, computed } from 'vue'
import UploadComponent from '@/components/upload/UploadComponent.vue'
import type { FormInstance } from 'element-plus'
import { uploadAvatarApi } from '@/api/upload'
import { baseURL } from '@/utils/request'
import { ElMessage } from 'element-plus'
import router from '@/router'
const ruleFormRef = ref<FormInstance>()

const user = userStore()

const rules = reactive({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 3, max: 8, message: '长度范围为 3 到 8 个字符', trigger: 'blur' },
    ],
    gender: [
        { required: true, message: '请选择性别', trigger: 'blur' },
    ],
    introduction: [
        { required: true, message: '请输入个人简介', trigger: 'blur' },
        { min: 0, max: 50, message: '最大为 50 个字符', trigger: 'blur' },
    ],
})

const avatar = computed(() => {
    if (user.userinfo.avatar.includes('blob') || user.userinfo.avatar.includes('http')) {
        return user.userinfo.avatar
    }
    return `${baseURL}${user.userinfo.avatar}`
})

const handleChange = (file: File) => {
    user.changeTempAvatar(
        {
            avatar: URL.createObjectURL(file),
            file: file
        }
    )
    console.log("avatar");
    console.log(avatar.value);
}

const userForm: { [key: string]: any } = ref(user.userinfo)

const onSubmit = () => {
    ruleFormRef.value?.validate((valid) => {
        if (valid) {
            userForm.value.avatar = user.tempAvatar.avatar
            userForm.value.file = user.tempAvatar.file
            const params = new FormData()
            for (const i in userForm.value) {
                params.append(i, userForm.value[i])
            }
            uploadAvatarApi(params).then((res: { [key: string]: any }) => {
                const { _id, role, gender, introduction, username } = user.userinfo
                const data = {
                    _id,
                    role,
                    gender,
                    introduction,
                    username,
                    avatar: res.data.data.userData.avatar,
                    file: {}
                }
                user.userinfo = data
                router.go(0)
                ElMessage({
                    type: 'success',
                    message: '修改成功'
                })
            })
        }
    })
}
</script>

<template>
    <div id="center">
        <img class="centerImg" src="@/assets/center.png">
        <el-row>
            <el-col :span="8">
                <el-card class="avatar-card" shadow="never">
                    <el-avatar :size="150" :src="avatar" />
                    <h4>{{ userForm.username }}</h4>
                    <h4>{{ userForm.role === 1 ? '管理员' : '编辑' }}</h4>
                </el-card>
            </el-col>
            <el-col :span="16">
                <el-card class="form-card" shadow="never">
                    <el-form ref="ruleFormRef" :model="userForm" label-width="auto" label-position="left" size="large"
                        :rules="rules">
                        <el-form-item label="用户名" prop="username">
                            <el-input v-model="userForm.username" />
                        </el-form-item>
                        <el-form-item label="性别" prop="gender">
                            <el-select v-model="userForm.gender" placeholder="请选择性别">
                                <el-option label="男" :value="1" />
                                <el-option label="女" :value="2" />
                                <el-option label="未知" :value="0" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="个人简介" prop="introduction">
                            <el-input v-model="userForm.introduction" type="textarea"
                                :autosize="{ minRows: 5, maxRows: 10 }" />
                        </el-form-item>

                        <el-form-item label="头像" prop="avatar">
                            <UploadComponent :avatar="user.tempAvatar.avatar" @fileChange="handleChange" />
                        </el-form-item>
                        <el-form-item>
                            <el-button class="submitBtn" type="primary" plain @click="onSubmit">更新</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<style lang='less' scoped>
#center {
    position: relative;

    .centerImg {
        position: absolute;
        width: 520px;
        top: 35%;
    }

    .avatar-card {
        display: flex;
        margin-right: 40px;
        flex-direction: column;
        align-items: center;

        h4 {
            margin-top: 10px;
            transform: translateX(50px);
        }
    }

    .form-card {
        padding: 40px;

        .upload-demo {
            width: 500px;
        }

        .submitBtn {
            transform: translateX(100px);
            width: 200px;
        }

        .el-input,
        .el-select {
            margin-bottom: 20px;
            width: 70%;
        }
    }
}
</style>